<template>
  <div style="width:100%;height:100%;">
    <div class="sc-display articleList">
      <div style="width:10%;height:100%;" class="cc-display">1</div>
      <div style="width:80%;height:100%;">
        <div
          style="width:100%;height:60%;"
          class="sc-display"
          @click="showArticleEdit"
        >
          这是文章的标题
        </div>
        <div style="width:100%;height:40%;" class="sc-display">
          文章创建日期等信息
        </div>
      </div>
      <div style="width:10%;height:100%;" class="ec-display">编辑</div>
    </div>

    <el-dialog
      title="文章编辑"
      :visible.sync="articleDialogVisible"
      :before-close="articleHandleClose"
      :fullscreen="true"
    >
      <span>
        <Editor v-model="article.content" />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="articleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitArticle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
// import Introduce from "./Introduce.vue";
import Editor from "@/views/article/Editor.vue";

export default {
  name: "ArticleList",
  components: {
    // Introduce,
    Editor
  },
  data() {
    return {
      textinfo: [],
      articleDialogVisible: false,
      article: {
        content: "",
        articleId: ""
      }
    };
  },
  methods: {
    showArticleEdit() {
      this.articleDialogVisible = true;
    },
    articleHandleClose(done) {
      done();
    },
    submitArticle() {
      console.log(this.article);
      this.axios
        .post("getinfo/article_edit", {
          id: this.article.articleId,
          article: this.article.content
        })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-main {
  padding: 0;
}

.articleList {
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #eee;
}
</style>
